<!-- src/views/User/Bidding.vue -->
<template>
  <div class="bidding-container">
    <div class="content">
      <el-card shadow="never">
        <div class="table-header">
          <h3>投标项目列表</h3>
          <div class="search-box">
            <el-input
              placeholder="请输入标的名称搜索"
              v-model="searchQuery"
              clearable
              @clear="handleSearch"
              @keyup.enter="handleSearch"
            >
              <template #append>
                <el-button :icon="Search" @click="handleSearch" />
              </template>
            </el-input>
          </div>
        </div>

        <el-table
          :data="filteredBidList"
          style="width: 100%"
          v-loading="loading"
        >
          <el-table-column
            prop="id"
            label="序号"
            width="80"
            header-align="center"
          />
          <el-table-column
            prop="name"
            label="标的发布名称"
            min-width="200"
            header-align="center"
          />
          <el-table-column
            prop="endTime"
            label="投标结束时间"
            width="120"
            header-align="center"
          />
          <el-table-column
            prop="status"
            label="状态"
            width="120"
            header-align="center"
          >
            <template #default="{ row }">
              <el-tag :type="statusMap[row.status].type">
                {{ statusMap[row.status].text }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            width="120"
            header-align="center"
          >
            <template #default="{ row }">
              <el-button
                v-if="row.status === 'unregistered'"
                type="primary"
                size="small"
                @click="handleRegister(row)"
              >
                报名
              </el-button>
              <el-button
                v-else-if="row.status === 'registered'"
                type="success"
                size="small"
                @click="handleView(row)"
              >
                查看
              </el-button>
              <el-button
                v-else
                type="info"
                size="small"
                disabled
              >
                已结束
              </el-button>
            </template>
          </el-table-column>
        </el-table>

        <div class="pagination">
          <el-pagination
            v-model:current-page="currentPage"
            :page-size="pageSize"
            :total="total"
            layout="total, prev, pager, next, jumper"
            @current-change="handlePageChange"
          />
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { Search } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'

const searchQuery = ref('')
const loading = ref(false)
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)

const statusMap = {
  unregistered: { text: '未报名', type: 'danger' },
  registered: { text: '已报名', type: 'success' },
  ended: { text: '已结束', type: 'info' }
}

const bidList = ref([
   {
    id: '01',
    name: '四川省交通建设集团有限责任公司智能化场招标的采购的公',
    endTime: '2022-04-13',
    status: 'unregistered'
  },
  {
    id: '02',
    name: '校工会交互智能平板成交公告',
    endTime: '2022-04-13',
    status: 'unregistered'
  },
  {
    id: '03',
    name: '平邑县图书馆馆藏图书及智能化设备采购项目中标结果公示',
    endTime: '2022-04-13',
    status: 'unregistered'
  },
  {
    id: '04',
    name: '三一智能电机-局部发电设备-招标招标公告',
    endTime: '2022-04-13',
    status: 'unregistered'
  },
  {
    id: '05',
    name: '中电鸿信息科技有限公司2023年警务室智能化改造项目单一来源采购方案公示',
    endTime: '2022-04-13',
    status: 'unregistered'
  },
  {
    id: '06',
    name: '海头镇宅基村土地发包项目',
    endTime: '2022-04-13',
    status: 'unregistered'
  },
  {
    id: '07',
    name: '先锋创业大楼（515-1室）60m²',
    endTime: '2022-04-13',
    status: 'unregistered'
  },
  {
    id: '08',
    name: '万达开绿色智能铸造产业园项目（二期）比选结果公告',
    endTime: '2022-04-13',
    status: 'unregistered'
  },
  {
    id: '09',
    name: '2023年度工伤基金结算支付智能审核监控项目竞争性磋商公告',
    endTime: '2022-04-13',
    status: 'unregistered'
  },
  {
    id: '10',
    name: '万达开绿色智能铸造产业园项目（三期）比选结果公告',
    endTime: '2022-04-13',
    status: 'unregistered'
  },
  {
    id: '11',
    name: '太原市迎泽区卫生局卫生监督所2023年4月至12月政府采购意向-公用经费项目',
    endTime: '2022-04-13',
    status: 'unregistered'
  },
  {
    id: '12',
    name: '侯马市第二中学校2023年4月至11月政府采购意向-城乡务教育补助经费中央资金',
    endTime: '2022-04-13',
    status: 'unregistered'
  },
  {
    id: '13',
    name: '太原市迎泽区卫生局卫生监督所2023年4月至12月政府采购意向',
    endTime: '2022-04-13',
    status: 'unregistered'
  },
  {
    id: '14',
    name: 'ZB202304130003招标招标公告',
    endTime: '2022-04-13',
    status: 'unregistered'
  },
  {
    id: '15',
    name: '【次氯酸钠贮存罐修理】采购公告 附件',
    endTime: '2022-04-13',
    status: 'unregistered'
  }
])

const filteredBidList = computed(() => {
  return bidList.value.filter(item => 
    item.name.includes(searchQuery.value) ||
    item.id.includes(searchQuery.value))
})

const handleSearch = () => {
  currentPage.value = 1
  loadData()
}

const handlePageChange = () => {
  loadData()
}

const loadData = () => {
  loading.value = true
  setTimeout(() => {
    total.value = bidList.value.length
    loading.value = false
  }, 500)
}

const handleRegister = (row) => {
  ElMessageBox.confirm('确定要报名此投标项目吗?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    row.status = 'registered'
    ElMessage.success('报名成功')
  }).catch(() => {
    ElMessage.info('已取消报名')
  })
}

const handleView = (row) => {
  ElMessage.info(`查看投标项目: ${row.name}`)
  // 实际项目中这里应该跳转到详情页
  // router.push(`/bid/detail/${row.id}`)
}

loadData()
</script>

<style scoped>
.bidding-container {
  padding: 0;
}

.content {
  background: #fff;
  border-radius: 4px;
}

.table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.search-box {
  width: 300px;
}

.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

.el-table {
  margin-top: 20px;
  --el-table-border-color: var(--el-border-color-light);
}
</style>